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Css language 


,S AjLu 

**«* 


(jL Ö JfrL* J ö JJ a£ (^Lj^ c£jU 

^alj öLj Aj ^ ^J AlLoî Aj Ij Aj JJ 4£ji} ^Jjuj öJ ö jlj ÖJ 4uuJ a1 J Aj j ^ jjj AA 

j ÖJ Aj IJ Aj djj A£jjj ^JjuJ öJ lû CjjL^J A£ (J öjl£ J Aj J <JUJ <S jb <J (Jj£ j jjjJ 

Clinj öû jl5o jjj a£j <juj (j a£jj] 

L? ö jtjj îySuuJ 4-lJj (^JLj^JjujjjL (J ö jljj öL Aj jn^S ^aJjl jJ A£ ^aJl ^ui ji. J jj 

ÖjbjjL IJJ^, ^jIjJJjoJ <J JJ ^^jU. öj A£j jIj Aj (J j OJj A£ J <juj <J (JjLojA (^jLg j 
Öjl£ ^ Aj A£jj^ C*nLj 4-yj (^iLj£ OJjujjjL (J öjLj öL JJ (^£inj£ ^jjjuJJj Aj Lj£ ^Jjuj öL 
Aj cijLjjJuJ ÖJ J AA ÖJ (jLjj^ (^JJJJji (^jLg j Aj jl^ öjl^j 4uuJ (^JjjJ LLjj jA Ajjj öL 
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Css language 


Al CIujjj (j^jj£ 4 \\ ^ 4£ Cujj 4^a öj <*—ujj 4£ (JjUjIj j ClL oijI j Jjjj Jj 

j ûj 4j c£jjVj (jU uiji a£ ^ijj 4 j*k j 4j^ 4 £jj^. uijji jj jj-ö aa (j ö jWj 
L li^j jjljJJ J (JjI£j jIjjjA <J j 4 J 4£ j Aj A£lj jU AjL£j L$ jj/ujjj J ClUJ Aj jilj 

. Û ^? Û^' J Û^j£-jh? J ^ C5^jJj'j J <J 6J j? ÛW^? f J Aj 

4j tJlilûj 'û clilû oû (Jj AA jlj dilû eJ 4 j i^ÎjjI£ t£lul£ L_ajj^ jLa j5Ûj 6 j 

l£jj J <JUJ Ajjj A£ C^jjuj 4 j J <J J AA AlLolJjlj U. dlb öû ClluJ <J J 4 j ^juJ jJ jUj£uj Ij 

Û^? J' j J ^ ^? J (Û?J op'j^ û'-* 

<£ 4ujj£ j ^ 4£ j 4Jk j 4£ 4u öj öj^j£ ö^LûU CLloiJj 4uoj j£ (j 0 jjjjj 4jjl£ j 4u j>a öj 
j 4Jfc 4 £jj^. jjjjaj 4jIj ^l jjA I j 4u j l£ 4 j 4uU ^^j^ jjjU 4J jU CIuj AA U 4£ 4ul£ 4J 
^»L^u 4u di 4u 4j 4Jfc 4£ 4u 4.A (j 0 j 4u (jj 4£ 4u Ij 4u CuU ^»L^u 4u ULjl£ U1 jjI£ Uliuj 4£ 

uIjjjjjuj 4 J jLLuj öj 4 J öjj^U. jU jl5U AJti 0 j CuIaj 

jj^iiij^ uu 

û' j>*i j 


jiSLu.U 


a£ CujLuj uujj ^ul£ öj Aj j öj 4udiljl j jj jl£ ö jj& 4u j 4Jb 4uUj 4J 4££ 4 u 4uUaj ^ 4u 

J û'C5^j'J^ 44 Û^'J^ Û J J Û 4u JJ ^lJ^ jjj ^ û ^'y ^ 

j öA5 4^ 4Jj ö^ 4uLû j ^ 4u (j jA 4u 0 j 4 ujjj jl jj jLa 4£ 4 ujLuj lujj ^^ujI j-p jjj£I j 0Jj 4 uuj 
4u Cuj 4£j Cujujjj^ CujLuj uujj 4uLg j ^4u<jjA4uUj4u4u ^l jjU Jj öj 4 U£l j ^jj 4uuj 
4u jl£ 4uj 4£ujl£ (j öj 4u jj Cujjj£JjI£ 4u jjLuj& C5“^0 cJ 4£ 4J 4uUj ^ 4u Cujj ö^ j£l 

Cujj 4£j j öû 

4u 4uUj ^ 4u jjjlJj ÖJ djjj£ öJ £-J ^lJ^ (J jl£ jLuj j£ ÖJ cjujj cjujj ^ ^Uj ÖJ 
4u ^U Cujj ^ 4 ^öUj 4u jjjljJ cJjUûj& ^uLa j j£ öj öj jjJJ^J jl£ 4u Uljjljjd -ii 4-^. 

. OJ%?J^ 
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Ulû 


ö^jjjuj j lP * k * j 0Jj ^-Luj j^ AA (JjjLj Ajjj^ ^ <S Lji. ^l jjjjolj Aj öj 

CIuj AA JÛ Ji LS^JJ^ ^jLI jjA öj jj öJ AjLûj ^ Aj 


L-£j ÖJ J lSÛ öû (J öJjjui ^J AjLöJ ^ Aj ^JjjJJJS jJ 

www.youtube.com/computersoranu 


^UjAjIS Aj 


^ ^ Aj JjUjjA <_g-il*j Ai e jljUş. ^UjA jl£ 4 j <_$ jljiU <_>jjj <_>jjj ^ ^Uj 

AjLojS ja.j 4Luilj j£J Aj ^ je>l ‘i ^jjl^ Aj AjLo j ^ <1 lj <j Lim^jjl^ 4 j l^Ij jli ej 4 j 

■ cr^ ûJ 


tj j Aj AJjuUjJJ I j Aj AjLöJ Aj 4j AjjIj (JJjuJ jjj AjLûJÛ J ^J (J ö J 4j (JjlJJ ^j 

Cy* jaj jj ciuj£j <j j 4 uuj <] j a£ Ajj a5ujI£ duj <lLo dj a£ jj a£j ^g jLp 

ÖJ Aj Cluj öJ tj ÖJ <JUJ JJJJUJ <J a£j A£ <JJjuJjJ ^Lj öj L_fllj£ ÖJ Aj ^£lj £gj Aj* 

: f <j j^p <-*l 
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Css language 


Ulû 




p 

{ 

} 


A^L öû ^jI^ l^ _)Uû ^ u ^Iö^ ^J C 5"^^"J lS ^^jU ^S 

^JUJ J±1 4jULû^)3 j Aj jU <jUj£ j Aj ^aj|Jj ö^ Aj <j!j A£ jj^ ^ <J jU <S öj öj <juJ (J <Jj>U 

; 4JJ>U (J^JJ (J^JJ ^ J <j (JJ 4 jjL a£ 



(JjLp 4 j ^JjU A£ jUujujjJ ûjkL ^j£ jLp jLû <jLgj3 j Aj ö jLp 4£ 4i j>U <S UÎ ö j 

: Ij 4 j <jL*£ Aj (^jj^jj aJ jjIjû L_fll öj 4j JU j U aJ jJ*Jjj <^3 ûj ^J^ 


AjjAj jj a£ ûJ 


p 

{ 

Color: 


} 


aûL Aj AjLuÖjj ^ Aj <_£ a£ Aj AjIj j£ aJ jjljj Cjjj AjLa ej a£ jjjoijj oj A 5 U oj j Aj jjIjû 




Ajj^aj 
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p 


{ 

Colonred; 

} 


(jjl jj oû jiwjÇ jjjI&Ij Aj jaJ 'C <jLaj ^ Aj ^Ijj&jI^ Aj (jjljluj Aj jjj Aj AjjLS Aj« Aj 

. Û LS^ 


û-L^ 


j'jp Cff^ ^ Ojj'jJ ^ MJj j'L ^ (J^ (J^ yr" 1 LS- 1 ^ j LS-^J^ uV 1 Ji 

; jjjj^j ^jlS Aj J jj a£j ^ tsjlS 

: f <* (5 j'jp 

Aj Aj« jU a£L ^ l£ öj (JjLLj^ ^gjLöj (_gjl-^ a£LS jL aJ jm^j jl£ Aj ajLû j ^ <j jp'jj oj 
eJ jl^ Aj AjjjLi j aJ Ij Aj jj a£j Aj j A_ui aJ AjLo j ^ Aj ^^g-jL^ eJj£ A^ AjLui 

: 


| e jljiui Aj L_fll j£ öj A_j (_g^LS j lj Aj ^juijjj i-*l <*<<»■'jj dijj Auo eJ j-a Ajj-aj jj 


Ajjjj 


<html> 















Css language 


Ub 



<head> 

</head> 

<body> 


<p style="color:red;">û' :i " i -bL£</p> 


</body> 

</html> 

L_fllj£ ÖJ <J ^ JJ x JjjJ Aj Aj AjjIj a£ ÖJ 

çş^ cr’'-* J cr^ eJ J^ C^'j^ j 3 c - 1 ^ 

ö^j£ jLû a£L jLti ö j ^Luj öj ö j ^Luj (j Aj jaj <1 

1 j AjL&jû ^ a!i a£ ^juj jj jULLLuj ^jLûjû jjIj^ 
CIjj a£j Ajj^. Ajjjuj ^ J ^Luo <S (JjjJJ (JjjJJ 


; ^aL^J Aj 

JULlbJJ^ 


jjjjuj Aj ö jJ (jLû <£ A \u *.\jj öj jjjjj (J ^£j 

^Ujja 4 j jl£ ALli dûj lj Aj ^yjj^j jl£ 

.htm 

û^ 

.html 


4£ ^LgL^j A!i jj ^Luj j a£ Aj 
Aj öjIjJjuj ^ AÎi jJ J 4£ Aj öj 


_ JJJJA jl£ <J (JjLöJ jA J L <S jl£ j£ 4-ûJJ a£j jj^ jj a£j l_Sj ^juj 
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<html> 

<head> 

</head> 

<body> 

<div style="color:yellow;">û^^ jj^</div> 

</body> 

</html> 


aLa-j 



Aj <jLaû ^ ^Jjjijj öj _ (jj A^j <jLa j 4j 4 j jl£ jjjjljJ ûj jj ^£j jljjjuj Aj Ia ûj j AA ûj 

| <jj-aj (JjLaj jA ^^jLa j û j <jui ^juj Aj jlj <J j jjgji^ 


<html> 

<head> 


<jLa j ^ Aj ^gjljjA jl£ <J <J <J <jjLj jjjuijj oj <£Li j <J ûjJ 

</head> 

<body> 

</body> 

</html> 
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(JjdJj ^uuJ ^jLöJ ^jI£ Ajj A 5 LjjI£ ^jjjI jJ öJ ÖJ 4 -JJjA 4j a£ jJjujJ "4 j Aj Cjjj öû jjIJ^ 

ÖJ AJJ A-ij ^uudL CllJJ öû ÖJ JJ A£j AjI^. J ^Ljuj a ! (JuJJ 


Aj j^J 


<html> 

<head> 

<style type="text/css ;, > 

</style> 

</head> 

<body> 

</body> 

</html> 


Aj Aj Aj AajIj a£ ‘ (jLalj oj e j e.i j£ (jLa 4£Li j Aj dûj a£ eJ ^jLp Aj A^ Aj jaj Ai Ll e j 

AjLaj ^ Aj ^jjljjA jl£ 


<j JAj 


JJjui <J JJ A£jJ (J A£ AjjjuJjj ÖJ L_fllj£ ÖJ 4j ^£Lj Cjjj 4 jLû öJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Coloriblue; 
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} 

</style> 

</head> 

<body> 

<P> OÖ^ ^ (j^JJ* <A</p> 

</body> 

</html> 


; Aj 




J 3 C5^ ^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Coloriblue; 

} 

div 

{ 

colorired; 

} 
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</style> 

</head> 

<body> 

<P>Ojj^ ^ ** </p> 

<div>ûu& (jb® jj* </div> 

</body> 

</html> 


; ^»L^J Aj 


jjjja Jg jUjjMj 


: ^ AjIuj ^ jtjiui 


ÖJ 4juo ^^uJi <J a ! Jj| j^ JJ A£j <juj jk <J J <joj ^jUi (J ö jJjuo <J AjLöJ <J JJjljJ öû 

^ cs^ SU (J^ L>^ cs" 1 ^ ^ 03 ^4? J ^ cs^W J* cs^“ j cs^ 

jj a£j ^ JjUjj& a£Ij j ^uuj 

^jklj j a£ ö jS^Jilj CIuj ö j jj a£ û j l_Sj <juo AjLûj Aj jj a£ 4-Lli j Aj CIuj öj 

; 4j AjLöjjû 

_xss 

4Jb (JjoJJ ^jjUJ (^juj ^jI£ öûjS 4 j Aj AjjIj (j <Lli j L j <JjL<u jA ^Lli CIuj öJ öj CIuj 

. J 6 Jja ^ Aj jlj jbSJJÛ J 


<J JAJ 
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j Ajuj a ! AjIj ds öj Ajj^ j <juoLuo j <juo a ! a£j ClbuOjJ^ cLj öL j3 12 ÖJ Auuo 

L-J jj£juoJ^ 

AjLû öû JJjuOjJ öû AjJjuOjJ j <J L_fll J^ ÖJ Aj J j& Aj AjIj JJjuOjJJ cLuJjuOjJ CllJj AjLû öû jjlj^ 

jjLp lJI j^ ö j Aj ^12 jiUJ jiUJ ^ ^li jUaJ^^Aj^jja£jja£a1jöj c^jj 

I ö jl jiui ^ Aj jj ö^ 



Aj <Lli öj ^J^ jLöJjuOJJ^ J ÖJ öA! j9 j Aj jIj <1 JJ ö^ L_Sj Auuo Aijli ^ 4 j jjIj^ 

cs^Ji* 


Css 


JJ öû L_Sj 4uuO 

; <i j^i 



Ö jL^> ^ Aj JjoJJ JJJJ^ ^^uuo ^Löj <J jJ ds AjjIj A£ ^j£ L_Sj 4uuo jLû 4-Lli j Aj J öJ <J J IJ^ 
Auuo <S jjojj jjojj ^uuo ^Lli ^jl^ <jj A^jjI^ ö j Aj jj jjjjA ö^ jl^ Aj iA&Ci JjLöjjA j\j a1 

: O'^ oî ^ j 


<html> 

<head> 
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<link rel ="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

<P>Jjj£ ^ 4^</p> 

</body> 

</html> 


jjjj ^Lli ^gjLudJ^lj jjj di <jAj (^joijj jLaj£ ej ^gjui Aj jlj e^j£ j Aj 

. d/Lij* ^Lli jU jj (jjjj 


■ û'^ j ûa! ja ul <j jlj <î <Lli jj^ j aa j a£jjj <jjj 


© indec 

6/3/201212:03 bjl^ 

Chrome HTML Do... 

1 KB 

j style 

6/3/2012 12:03 bjI^ 

Cascading Style S... 

1 KB 


e jjj jLa AS AiljS ej Aj (^£j oj jjjjj oJ (jL®- 3 Aj Aj AjjLj AS ej ej a£j ALli j Aj t*<. .< 

. öjjûjS û^J^ cs^ 1 LS^ jU Aj a£ ^ A^i ej j Aj 


; Aj 


'd 4 jjjjJ j'jL^ OJjL^û ej AjUj Aj ^Lj^jjjI^ Jl Ajjj^ <î jjj ^jLjJ jj A^ Aj 

. f L9 j'j^ 
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l-5o öj j l-5o jjl jJjuo Aj 


www.voutube.com/computersoranu 




ÖJ <j]Lû jIj <S I** uX j AjIj JJj^J J^ Aj (JJ AjjLj JJ AjIjLûJÛ j Aj ^uuoL L <joî Aj <S 

jLû 


color 


JJJj^JJ jLû ji. JJJJ ÖjL Aj jLö Aijjuo jJ ÖJ jLl jJ ÖJ AjLûJÛ ja Aj JjA Aj 


' <J jaJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

colongray; 

} 

</style> 
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</head> 

<body> 

<P> jl^jj£</p> 

</body> 

</html> 


; a .j 




Font-family 

jUl£ ÖjlJjjoa AjIj jLojI£ Jj (jjj^ (^JJjj^ jj CjJ^jl£ Aj <jLûj3 ^ Aj 


<j JAJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-family:impact; 

} 

</style> 

</head> 

<body> 

<p> jl^ûjj£</p> 

</body> 

</html> 
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<J 



Font-size 

j ö JJ jLö j^. (.5jj_) (jLö AjJjuJjJ ö jL ^ Û^' AjLûJÛ Aj (JjA 4j 

: o 3 ^ ls^jj^ 

<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-size:33px; 

} 

</style> 

</head> 

<body> 

<p> jU^jjj£</p> 

</body> 

</html> 


! ^L^J 













Css language 


Uta 


jS 

j%J jl£ Aj AjU Aj jjjljj 

ûJ:i j#^U C CS-^W <1 U ûj j AA ûj 


Large 


Small 


x-large 


x-small 




<html> 

<head> 

<style type="text/css"> 


P 

{ 

font-size:x-small; 

} 


</style> 

</head> 

<body> 

<p> jli*jûjjS </p> 

</body> 

</html> 













Css language 


Ub 






Text-align 


jJ CljJj ^JJ J A£ Aj <JJAJ Jj JJjuJ jJ AIujIjU ^ J^ jLp Jj CljJ^jl£ Aj AjLûJÛ ^ Aj 
jjjjA jl£ <J <jLûj3 j Aj I j Aj CIlujI J öjL jIj L_J 4u£> jLj j L$y ji ^ ^ 


Aj JAJ 


CIlujIj b jL Jj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-align:center; 

} 

</style> 

</head> 

<body> 

<p> jU^ûjj£</p> 

</body> 

</html> 
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; Aj 



; CLlojI j (jVJ j jaj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

text-align:right; 

} 


</style> 

</head> 

<body> 

<p> jli^jjj£</p> 

</body> 

</html> 

! c-J (jV Jj <j j-oj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 















text-align:left; 

} 

</style> 

</head> 

<body> 

<p> jLL^jj£</P> 

</body> 

</html> 


Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 


Text-transform 


Ij jjjljj eJ ej <jLajfl ^ Aj (j jA Aj jl^ e^jjjuo <j e j AA AjLajS <î î< Aj AjLajfl ^ Aj 
^j dim e^ ejj a£ AjIj (jLiiJ a£ Aj Aj j AA ^Lj ö j ^juj ^jj ^jLojI^ ^jjjuj jj 
AA jU (jj a£j j öjj ûjJjuo Aj jl£ Ajjj jj^ AA jj a£j 1j jjjIjj öJ jIj C1jI£j 

ûj ^ J 0,:i lS a Jf^ *■} l^jj* 


capitalize 


dil^j dLui eJ e jj a£ ^^jjj Aj iiî Aj AJjj j AA (jLi e j Ajui a£ <JjI£ eJ Ij AjLajfl ^ Aj 


| <J JA J 


<html> 

<head> 
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Css language 



<style type="text/css"> 


P 

{ 

text-transform:capitalize; 

} 


</style> 

</head> 

<body> 

<p> we are strong </p> 
</body> 
</html> 


We Are Strong 


uppercase 

Ajjj jj* AA (JJ a£j jLajl£ AjJjujjJ <S 1 j jjjI jJ 

jA Aj Ia öj j AA öj 
CIjIAj jLujJJ ÖJJ öjJjuo <j jl£ 


; j^j 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

text-transform:uppercase; 

} 
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</style> 

</head> 

<body> 

<p> we are strong </p> 
</body> 
</html> 

WE ARE STRONG 


loweracase 


o 


<j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-transform:lowercase; 

} 

</style> 
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</head> 

<body> 

<p> WE ARE STRONG </p> 

</body> 

_ </html> 

we at'Ê strong 


Text-decoration 


llj^)J lû AjJjuoJ j öjU <J (JjA JJ A£j Ij (Jjj| jJ AjIj JjA 4j <J AjjIj AjLûJÛ Aj 


none 

4A ^)jjj ^ <_£-La ^J <J (jLa û^) 4_JLa jj Llj (jLa£jJ _j AS Aj AS dilS öJ I j AjLa^)3 ^ Aj 

i LyJ A£ aJjA (jjjljJ oû AjLa^)3 ^ Aj <_£Aj 


Ajj<aj 


<html> 

<head> 

<style type="text/css"> 

a 

{ 


26 
















text-decoration:none; 

} 

</style> 

</head> 

<body> 

<a href="http://www.sul.eu5.org/"> sul.eu5.org </a> 

</body> 

</html> 


<J 


sul.en5.org 


underline 


^jLjIjA (JJ A£j (jLojl^ AjJjuo jJ AJIj AjLûJÛ ^ Aj jA 4j (Jjjl 


; <j j^j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-decoration:underline; 

} 

</style> 

</head> 

<body> 
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Css language 


Ub 


<p>jU^jjj£</p> 

</body> 

</html> 





overline 


<j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-decoration:overline; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 
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Css language 





Line-through 


Jjjj£j L jLojl^ AjJjuJ jj ^JjujI J öjIj Aj (JjA JjjlJj öû AjLûJÛ ^ Aj jA Aj 


; <j ja j 


<html> 

<head> 

<style type="text/css"> 


{ 

text-decoration:line-through; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 


4j 
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Css language 


Uli 


Text-indent 


I j (jjjljj eJ ej <iLaj3 ^ 4 j jjA Aj jl£ ^ j ^ij Ajuj <jLaj3 A^j£ Aj 4jLaj3 ^ Aj 
jjlj^j Jj ^jLuijj jjjil jj eJ (_gjjj£jj Clbaj eJ ^Li ej <jui <1 a£ (jj a£j jjLa a£ Ajj*jji 

| Aij<ai a£ Ajjuj ji ^ljiLUj Aj C1iI£j dLuj ej Clil£ j Ai jj e jj ^ (_j£ AjI jj A-a AjIj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-indent:23%; 

} 

</style> 

</head> 

<body> 

<p>cjUuijjj£</p> 

</body> 

</html> 



ejlj£ a£ Aibujji Aj <Hluj ej djl£ j Aj e jJjuijA Aj AjI jj A-a jjiiJ oj 


30 













Css language 



Font-style 

AJti jU£jjI jiJi Aj jl£ <1 lujjj jjl jJjuj <j Aj AjjIj jl£ 4 jLgj3 a! a£j£ Aj jjj Aj 

<J 

♦♦ 

italic 

ÖJ AjI£ jV jLojI£ AjJjuojJ Aj 

I <J JAJ 


<html> 

<head> 

<style type="text/css"> 


{ 

font-style:italic; 


} 


</style> 

</head> 

<body> 

<p>jli^jj£</p> 

</body> 

</html> 


aLa-j <J 



oblique 
















<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-style:oblique; 

} 

</style> 

</head> 

<body> 

<p>hy</p> 

</body> 

</html> 


Word-spacing 


Aj* dûj aIj j a£ Aj Jj aj(j jl£ Ajjjj j!jij aJ ^Li jj ^ljlj Jj clyûjl£ Aj AjUja ^ aj 
dnj 6Û AjLûjS ^ Aj HjIuJjJJ Ij Aj clu <£j (_ 5 jLû dlji, (_£jjj ûjlj Aj jl£ Ajj j jljjj (_$!ûJ 




<html> 

<head> 

<style type="text/css"> 

P 
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{ 

word-spacing:30px; 

} 

</style> 

</head> 

<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 

_ </html> 



Letter-spacing 


öjU Aj (jJ^I jJ öû AjIj Alnj (jl jjj <S ^jLuj jj jLj Lj ^Ub jj cln^jl£ Aj AjLûjû ^ Aj 

; öj <jj a£j jjjJ jUjJ^ Aj <î (jl*j^. (Jjjj 


Aj JAJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

letter-spacing:30px; 


33 














Css language 




} 


</style> 

</head> 

<body> 

<P>,jlluojJjS J jj£ jliuoJjj£ </p> 

</body> 

</html> 

; ^aL^J Aj 


Jjj^ Q l J J J j <■ 


background 

<jjj (jjjljj eJ lA ej j AA ej Ijl j 5 L£Ij j eji*j <j i_ 5 Lj ej (_gjljl j jJ djjjjl£ <j <jLajS ^ Aj 
a£ (jj a£j jJ jIj (JJjIjJ öû öj CIjjj 4 iLiJ a£ j AA jJ AjjIj£ c£Ij Aj jj a£j jjj 

! jj <jjl£ cjl^ ö j ^ Ö J ö jWjj^ 


Background-color 

L_fllj£ öj jtj jj a£j j jLj^ jLq a£ öj ^lJLû jAijlj££ Lj j-jj!j^ ajLûjû ^ Aj jj& Aj 

| <J JAJ 


34 













Css language 


Ub 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

background-coloriblue; 

} 

</style> 

</head> 

<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 

_ </html> 





<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-coloripink; 

} 
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Css language 


Ub 


</style> 

</head> 

<body> 

<P>(jllalJjj£ Jjj£ jlialJjj£ </p> 

</body> 

</html> 


al^J <J 



Background-iamge 


djjj <JJ dj1^1 Juj J (jAjjl j££L <J JJ A£j <JJj (JJjlÖÛ 4 jLûj 3 ja Aj JjA 


I <J JAJ 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(cr^' J ^ ls ^ û j^); 
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} 

</style> 

</head> 

<body> 

<P>,jlluoûJjS Jjj£ jlluoJjj£ </p> 

</body> 

</html> 




<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

} 


</style> 

</head> 

<body> 

<P> jlluoûJjS Jjj£ jlluoJjj£ </p> 

</body> 

</html> 
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Css language 


Ub 



jllaUjjS JJj£ 

HTML language 

j.£ j ^ 

s • >y; *j 

UUjVlMl.y^wUU 


HTML language 

-> J jj* —■*>“ j <, 

UU,>Vf aI.jI^mUU 


HTML language 

j J jj^ j'jjiA j v 

UU j O' aJ • y jS mU U 




HTML language 

J J J.£ sr*jJJ“ j 

uu j nV aJ *y >s *ju u 


HTML language 

J J JJ^ sr'^ j U 

uu j nV < *y jS *ju u 


HTML language 

uu j^V'0*y>s»juu 


Background-repeat 

Aj ûjIjjjJ cjU Ajjjjj ojljjjj A^ jj A^j Aj Ajjj j aJ Ij jjjjloj AjLa^S j A_i jA Aj 

ö j AlL 


J^udtj ö jiuj ^ Ö J ^ c5 b jWjj^ yj j a£ Aj 


; <j jaj 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x; 

} 

</style> 

</head> 
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Css language 


Ub 


<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 
</html> 
! ^ 


o Jj$ Jjji jtbUjjS 

HTML language 

j »/ 0 ^ 

uu ^nV <.y>.juu 


HTML language 

-» J J *■? 

»>o*j 

uu 


HTML language 

s> J J_£ <i 

•/-o* 

uu jnV u 


öj Ajj 4^j ^ ö^)IjjjL ^^jjJjuj L? öjJjuj ^ CIjjj AjL^j j Aj öj 


Aj 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x; 

} 

</style> 
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Css language 


Ub 


</head> 

<body> 

<p>,jliuoû jj£ jjj£ jliuoj jj£ </p> 

</body> 

_ </html> 

; ^»L^J Aj 



öj Ajjj <j öjLjj^ ClUj <jLoj j Aj öj 


Aj JAJ 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

} 


</style> 

</head> 

<body> 
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Css language 


Ub 


<P>,jlluoûJjS Jjj£ jlluoJ JJ$ </p> 

</body> 

</html> 



^—LkJAj : j * --O 

HTML language 

u» J J^ ^t-O -V 

UV> j %V mU 'u 




öj ûjIjjjJ jjuuLi ^ AA ^gjjj*i >» (j ö jj >'» <j ^ AA d jjj AjLûj j Aj oj 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x,y; 

} 

</style> 

</head> 

<body> 

<P> jlluoûJjS Jjj£ jlluoJjj£ </p> 

</body> 


















Css language 


Ub 


</html> 
! ^L^J ^ 


J 

HTML language 


1—ITIVIL language 


HTM 






1—ITIVIL language 


HTM L_ language 


1—ITIVl 






1 _ 1 

U 

1 _ 1 

U 

1 


Background-position 


J*i}jl j£ dlL Aj 4jLöjjLj£ 4^ Aj Ajjj j 4j ^JjuJ Aj JJ A£j (jLö 4^ 4-JJj 4-i Ij Jjjl jJ 
CLlojIj öjIj jIj Cljjajlj jV 4-1 jIj L-J 4_^ jV 4j jj a£j jJ jIj jdjl jLa 4^ öj 4^1Lû 

^ cMy 


; 4j j^j 


<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

background-position:center; 

} 

</style> 

</head> 

<body> 

<P>,jlluoûjj£ Jjj£ jlluoJjj£ </p> 

</body> 
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Css language 


Ub 


</html> 
! ^ 



: V jj 

<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

background-position:left; 

} 

</style> 

</head> 

<body> 

<P>,jlluoûJjS Jjj£ jlluoJjj£ </p> 

</body> 

</html> 



















(jV Jj 

<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

background-position:right; 

} 

</style> 

</head> 

<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 

</html> 




Ub 
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Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 


class 


Jj joÛj ^ j jU Al Cjj a£j cJ jUû UJjÊj jja. jjjjj 6J Aj cJ JJ3 Luuj 
; (^gjuojj jU oJ Aj öjJjoij Aj I j Aj jj a£j jIjJ l_s( j£ oj Aj ^^£13 jLaljluiJj j a£ Aj 


P 

{ 

_ ? ? _ J_ 

L> * ^*Lj ^Stj J ^ jJ 4j|j 4jlS AiljS ÖJ 4j JJjû AA Jj ö j Aj ^aV 

^uud <S AS CllJjS Aj J <juj <S (J AiLjJ <£jjlS j Aj jLû Ij Aj cJjLöJjA j\j <S 

Aj (JjlJj öû CjjILûIj jLq <jouS j Aj JjJ^IS JjA 4 j ^aV ^J ÖJJ^jS jLû JjLj^ JjJJ Jjjj 

Jj j'jW CS 1 ^ ih ^ ^ J 4A 6 J Oî ^ jUû c>J c>J ^ jU a] L_il j£ ûj Aj jja. 


. û#^ 
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Css language 


? <4 ûit 

ÖJ Alllijjl JJJ Aj CljJj Aj öJ A£ CllLuJ jJ öû a£Ij j Aj Ij ÖJ <JUJ 


a£ Aj ^l öj 4j jj jj a£j ^jLp L_fllj£ ÖJ <J JJ^- JJ^ Cljjj AjLû öJ A-öJJ jjIj^ 



JJ^! Aj jj a£ oû J-j 6J j£ (J jljû jU a£ Aj ^l j^ 6J Aj liîiiu. JA Aj jjjjj 6J 



j^û Aj jj U oj (J U Ajjjoljj ^^50 6J J j)J <£ 6Û (J jLjJ f, 6JJÛ ^l j£ 6J Aj 6jU f Aj 6J 

p.first 

{ 

Colonred; 

} 

p.second 

{ 

Coloriblue; 

} 


Ajja3 jj jjjjA oJ jljjl^ Aj JjLajjA jlj AÎ !*'■ j‘' 6j Aj AA jLaSlj^ oj Aj jjş. JJ"3 '*'■ Li ;‘' 
AiljS 6j Aj j Aj lj Aj ^ 6ÛJ ^J j jjjjuo ( 4j| ja. (_jjS^ (J AÛojj <—JJj A-a oJ j-a 

jjj*j oj Aj Aj AjjLj A£ ^ A£ 0 Û (JjLjJ 
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Css language 


<p class = "first"> dj^ </p> 


JJ?'^ Csi ?. JJJ^ C5^ °J o4> ^ j lj uîjL f J^ 6 J J ^ Û^? 6 ^ 

^ ö (jLû Aj A£j (JJjuj Ö J *^lj ^ öjjL L^JJ^ ^J J Ö J 

(JJjuj öj Aj Aj AjjIj (j öjj^ j Aj <>0 öL a£ Ailj^ öj ^Lj 


<p class="second"> dj^ </p> 


<i j^J 


<html> 

<head> 

<style type="text/css"> 

p.first 

{ 

color:red; 

} 

p.second 

<html> 

<head> 

{ 

color:blue; 

} 

</style> 

</head> 

<body> 

<p class="first"><j'>?* dj^ </p> 
<p class="second"><j'j^ Jj^ </p> 

</body> 

</html> 
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jjÛI j.lk ^ Ijlj 
\ 0\ 


id 


Aj <A ^jljU^ ^jUlA jl£ <J <jjljioi <J AjIj j£ öj J^J^ jl^ Jjo <jUij3 <J 

<S UU JjJ jUujoî ulll j£ UIjjI£ jlA jl^ Aj öJ Aj jJ AjLûJÛ ^ Aj Jjj2A£ J a ! 

OJ ls^W Û^'j^ öJ jjj AA ^gjj jUJijjjj (Jjjl£ j-UAJ jjIjU Ij A: (jjJ (_>jJ jU 

. J jU JA ^l£ A^lj Ai i 4£ j'-' ^ l 9 <4 û^ 


(jjjjA eJ j 4 j ejljjJ 4 j <iLaj3 ^ Aj 


#dana 

{ 

Color:pink; 

Font-family:impact; 

} 
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Css language 



^jU jjI j^ (jj a£j jU^ a£* 4jAjU jjj! jJ öJ (JjjIa (J Aj\ juojj Aj öjU^ <jjaj <1 UÎ öj 
öj *Ljj *Lg <j (j Ajjjujjj öj öjj^j^ jLûJjLj^ 4 jAjU j Aj \*Ujj n jjjj öûb jJ 

ÖJJ^J^ (J jLj^ (jLûJUJ Ajjjû (J jj^ 

^^jjjujjj j <juj a! öjUL (jLc (Ub ^jAjU^ Jj a£ (j ^lUj a5UjI£ j lIjjj AjUij j a£ Aj 

jVJ^ (^'\>^Jj Aj <J AjjU A£ (J A£U j Aj jU <S AJjoiJjJJ Ij Aj (JJ a£j <J jVj^. 

<J-£ CS^ 1 J^ ^ 6 JJ Û J^ ti jL 2 ^ OJ J ^ CS^W ^JJ^ 

] öjl jJjuJ ^ Aj 


<marquee id="dana"> jli^jjS </marquee> 


\ L_fll^)£ b^) <J <JUJ a1 Aj 


<html> 

<head> 

<style type="text/css"> 

#dana 

{ 

color:pink; 

font-family:impact; 

} 

</style> 

</head> 

<body> 

<p id="dana">j^jj^</p> 

</body> 

</html> 


! ^LaL Aj 













Css language 


crW cP'j^ ^J oJ ^ ^ ^J^ L$JJ j 6 J^ cr^'j 15 oJ °J 


<html> 

<head> 

<style type="text/css"> 

#dana 

{ 

color:pink; 

font-family:impact; 

} 

#twana 

{ 

color:yellwo; 

font-size:33px; 

} 

</style> 

</head> 

<body> 

<p id="dana">û^^jj^</p> 
<p id="twana">û^ J jj^</p> 

</body> 

</html> 
















ûLljlU^jC^ 


L-£j ö J J öû ö jJjuJ Aj 

www.youtube.com/computersoranu 

blue.dana66@yahoo.com 


! J ^ j jj 


Ub 

















border 

jjjljj û j jj dboijjj jl£ Alvi (j Ajjjj jj jljii jjjlji eJi (jjij (jjij ^gjLjj aJ 

<j AA jl-ûjljj! (J jj^- Ia û^j Aa. ej jj a£j (JjIjJ j!_j ejlj A3 jjjljJ e^ ej jj a£j jl_i$j ej 

jj A^j jLiiuijjJ jjjljj eJ A^ 

Border-style 

Aj AA jLa jjş. jjj a£ jj a£j (JjIjJ jl£ ejljj! (jjjş. jjjljJ e^ ej AjLajfl ^ Aj (jjA Aj 

dotted 

| Ajj<aj jljj! (^jl^ ejj^. A^J jj^. Aj 

Border-style:dotted; 




<html> 

<head> 

<style type="text/css ;, > 

P 

{ 

border-style:dotted; 

} 

</style> 

</head> 

<body> 

<p>jLL-jjjS</p> 

</body> 

</html> 















Css language 


double 


| j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:double; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 


aLa-j 
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solid 

e jj JL 


; <j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:solid; 

} 

</style> 

</head> 

<body> 

<p>jll^jjj£</p> 

</body> 

</html> 




groove 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:groove; 
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Css language 


Ub 


} 

</style> 

</head> 

<body> 

<p>j^jj£</p> 

</body> 

</html> 


dashed 

JJ <_5^U <_£ ^ 


; <j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:dashed; 

} 

</style> 

</head> 

<body> 

<p>jU^jj£</p> 

</body> 

</html> 


aLa-j Aj 
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Css language 


inset 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:inset; 

} 

</style> 

</head> 

<body> 

<P> jtlu)Jjj£</p> 

</body> 

</html> 


Aj 



outset 

: j ^ ^ 

; <i j^j 


<html> 

<head> 

<style type="text/css"> 

P 
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{ 

border-style:outset; 

} 

</style> 

</head> 

<body> 

<p>jU^jj£</p> 

</body> 

</html> 






ridge 


j'j^ lS JJ^ ÛL>“' 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:ridge; 

} 

</style> 
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</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 





hidden 

0 I£ .jljji 6j <jJjUj 4 j t 1jl. i' ûjî AA <jLaj3 ^ <j 


; <jj<aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:hidden; 

} 

</style> 

</head> 

<body> 

<p>jll^jj£</p> 

</body> 

</html> 
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; Aj 




Border-color 

(JJ A£j <JjLp jLûJ p* (JJJJ ÖjL <J jl£ öjlJjî ^Lj ÖJ JjjlJj Öj AjLûJÛ <J (JjA Aj 


; Aj 


Border-color:blue; 


Aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-color:green; 

border-style:dotted; 

} 

</style> 

</head> 

<body> 

<P>(jtlu)Jjj£</p> 

</body> 

</html> 


! ^LaL Aj 
















Border-width 

ojU Aj oj <£j j Laj\£ o jljjî (jjjiuo Aj jjjl jj oû oj AjLojS ^ <j (_$J& 4j 

: (j^ cP'j'û^'j^ 0:1 ch jLojî> (jjj j 




Border-width:20px; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-color:green; 

border-style:dotted; 

border-width:22px; 

} 

</style> 

</head> 

<body> 

<p>jLLj^jj£</p> 

</body> 

</html> 


















Css language 


Ub 



Border direction 

j\j oj 0J ^ui jL J J^ jU V ^ j^ ojj'jJ 6û jj ûJ tli«jjû j'jii Aajj 

i Oî ^ 6 JJ a£ (j Û jU Ai J j#j'«j Jj (^U 6J jbjik. (Jjjj 0 jU 4j 'j oj'jik 


Border-left 


ûjljij Aj l^j <j <j c_J (jV (j j' jj! (jjl£juo oJ jj <JjjJjI£ Aj AjLajfl Aj 


Border-left-color:red; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-left-color:red; 

border-left-style:inset; 

border-left-width:15px; 

} 

</style> 

</head> 

<body> 

<p> jU*j^jj^</p> 

</body> 

















</html> 
! ^ 



Border-right 


jUJi. ^jj ö jU Aj CIlujI j jl jj! ^Jij^ (jjljJi Jj CljjJijl£ Aj ji Aj 


<j jaj 


Border-right-color:blue; 


; <J jaJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-right-color:red; 

Border-right-style:inset; 

Border-right-width:15px; 

} 

</style> 

</head> 

<body> 

<p>û^jj^</p> 

</body> 

</html> 
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; Aj 


Border-top 

iSjJj ö jLj ^ Ö J Ö J 4-J^J L SJ^ J^ Cllu3 jIj jI£juJ öL jJ C!jjLjI£ Aj Aj 

; jL»ji. 


; Aj 


Border-top-width:20px; 


Aj ^aJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-top-color:red; 

Border-top-style:inset; 

Border-top-width:15px; 

} 

</style> 

</head> 

<body> 

<p>jli^jjj£</p> 

</body> 

</html> 


; Aj 
















Border-bottom 


jj t-i“, jjl oj ojlji. jj _jljjl jUjp. ojIj 4j (jjjljJ oû oj 4jLaj3 ^ Aj (j jA 4 j 


û jljiji ^ Aj 


Border-bottom-styleidotted; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-bottom-color:red; 

Border-bottom-style:inset; 

Border-bottom-width:15px; 

} 

</style> 

</head> 

<body> 

<p>jU*jûjj£</p> 

</body> 

</html> 


! ^ 


















'V _j 4A •“'-j 

<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-bottom-color:red; 

Border-bottom-style:inset; 

Border-bottom-width:15px; 

Border-top-color:blue; 

Border-top-style:groove; 

Border-top-width:15px; 

Border-left-color:gray; 

Border-left-style:outset; 

Border-left-color:yellow; 

Border-left-width:15px; 

Border-right-color:pink; 

Border-right-style:dashed; 

Border-right-width:15px; 

} 

</style> 

</head> 

<body> 

<p>û^jj^</p> 

</body> 

</html> 
















Css language 


UIj 




Border in line 

ûJ ^jj a£ ejlj <9 \j ûj Ajui (JiA c£l Aj Aj jj A^j diuijj^ jljjl <jjjljJ o^ lA e j j AJt> oj 

<_£ a£ a5o ej i$ A£ ej jş. jjIjJ jj a£ 


e jlji^ ^ Aj 


Border:3px green; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 

} 

</style> 

</head> 

<body> 

<p>jU*jjjj£</p> 

</body> 

</html> 


aLa-j Aj 



66 



















Css language 


padding 

AjIjjoj j <J jja AA j <JJj J L_fllj£ ÖJ Aj jl jJJ <jLj JJ^IJj Öj 4 jLûj 3 ^a Aj jA <J 

A-ö ^j|jj ^juj jj imjj <j j^j jj AjI j jj a£j jjIj^ jj^jl^ Aj JjLûjjA aJ J 

^ji. lSJJJ ö J^ ^ ^ A^j jjLl öjIjjA ^ajl£ Aj a£ j a£Lj j Aj (J a£ a ! Ajjjujjj j Aj l?Lj 

I <J JAJ Jj 

Öj AjLûJÛ j Aj (JjA <J jLuûIj CIuj AJt> (JjlJj] <J-LujJ j j Aj öj ^auuJjJJ jJ ClUj öL J-û 

^a A£j <JjLp ^ajk L?JJJ Ö J^ ^ L? 4£ öjl jj] j A£ <iijuJ jJ jl jJJ <jLj A^ ^l\jl 

; <i j^j 


{ 

Border:2px solid green; 
Padding:20px; 

} 
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Css language 


Ub 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border:2px solid green; 
padding:20px; 

} 

</style> 

</head> 

<body> 

j Ij <jaLLa </p> 

</body> 

</html> 


aLa-j <J 



û j <jj <£j ^ 'Cjbj Ajû j Aj 4j <j_jj«j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border:2px solid green; 

padding:2px; 

} 

</style> 
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Css language 


Ub 


</head> 

<body> 

<P>jjj ^lj ûJj b </p> 


</body> 

</html> 






jjj ? lj -O.J JJ b JJi 




Padding-left 


Aj jj <£j (_^jtjû t_J 4_^ (jV (_$Uj jjjljJ 


; <j jjcli 


p 

{ 

Border:2px solid gray; 
Padding-left:20px; 

} 


Padding-right 


jj <£j (jjljJ dLuilj (_^V (_^bj <jû jjjljJ eJ öjJ*J jCa 4A Aj Ia öj j 4A öj 




p 

{ 

Border:2px solid gray; 
Padding-right:20px; 

} 
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Padding-top 

\ jj <£j (jjLp oj 6J Ajuo (jV j <-0 (jjjljj oû Ia oj j AA oj 




p 

{ 

Border:2px solid gray; 
Padding-top:20px; 

} 


Padding-bottom 


jy A^j jLöjp. (j jj j öjIj 4 j 6 j 6 JJJ (_£lûj (jjjt jj oû lA oj j AA oj 


I <J ^AJ 


p 

{ 

Border:2px solid gray; 
Padding-bottom:20px; 

} 




<html> 

<head> 

<style type="text/css"> 

p.a 

{ 

border:2px solid gray; 
padding-left:20px; 

} 
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Css language 


Ub 


p.b 

{ 

border:2px solid green; 
padding-right:20px; 

} 

p.c 

{ 

border:2px solid blue; 
padding-top:20px; 

} 

p.d 

{ 

border:2px solid yellow; 
padding-bottom:20px; 

} 

</style> 

</head> 

<body> 

<p class="a">û£ f'j ^j W ** </p> 
<p class="b">û£ ç»'j U </p> 

<p class="c">û£ f'j eJ j ^ U </p> 

<p class="d">û£ f'j û:i j U <Af* </p> 

</body> 

</html> 
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Css language 


UIj 



Blue.dana66(q)vahoo.conn 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 


margin 


(jLa a£ AjjLuo 4-Uj <_£jl jj! jjljjj AJ bj Ajj ^ ui jj J Jj djjJjl£ Aj AjLajfl ^ Aj 

Ls AA j Ajjj j L_fllj£ ûj 4j jj£ oj jjûjl£ Aj (Jjj ^JJ ^ ^LŞj aJ a£ (j AjI£LS j Aj (J a£ 
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jil J eJ ^ 4 '\'■ a j 3 j 4!i jljii 4-a dijj A_a e^ (j-a 4j ja3 jj 

A£j (_£jLp ji. ^JJJ ejU Aj ^ A^ AjjLuI C_JJj 


A3 ja 3 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 

margin:20px; 

} 

</style> 

</head> 

<body> 

<p>jtLjûjj£</p> 


</body> 

</html> 




! ^L^J 

’^-F’ '-V ■ « ■ " V f / •/ w •- " 

‘ . . ._t . . --■ ■ ,w 1 " 






dl A^ j e^ Aj -jj^ j LajjLp A^ (_£ AjUj A-a j <J öjLiJ <! oj 


Margin-direction 


(JT^ (S j'J^ J ^ <î Jj'-^jA (jj 4jL$£jj (jljJJ (jLöj£> lSjjJ ^-î JjJjljJ 

Ö J Ö J^J^ 1 cl)^ Ö J Ö J AjoJ jIj L-J jt) CJjujI^) Jjj a£j ^jLjû jLû AjjLuJ 4-L)j 


e j'jiU f Aj 
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Css language 


Margin-left:20px; 


Margin-left 


a1 CIlujjj^ Lj Aj$ (jJjl jJ 4JLgj3 Aj jjA Aj 

; <j j^j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-left:20px; 

} 

</style> 

</head> 

<body> 

<p>jU^jj£</p> 

</body> 

</html> 


»L^J Aj 




Margin-top 


(jj a£j ^jLp öj öj <juj j (jjjl jj Ia öj j AA öj 
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<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-top:20px; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 


</body> 

</html> 


! ^L^J <j 


i lj>ci >/ iviy vv ur iu/ ueiMup/ l»^.nu i n 


t: 

1 


jHaUjjÇ 




Margin-right 

JJ <JjLp jLûjk iSjJJ ÖjL <J dlujlJ (J^lJ^ Ö J ^LLûja ^ Aj <j 


<j JAJ 


<html> 

<head> 

<style type="text/css"> 

P 
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Margin-bottom 


■ Ö J Ö J^j^ ^ Öi Cjlujjj^ I^j *Lg ^jjj!jj öj 4jLûj 3 ja Aj jjA 4j 


; <j j^j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-bottom:20px; 

} 

</style> 

</head> 

<body> 

<p>jU^jj£</p> 
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Css language 


! ^J 



C_5s* 4 ÖJ J L-$J öû ^ öjiuJ 4j AiLöJ ^ Aj ^JjjJJJSjJ 

www.youtube.com/computersoranu 


^cj^) 4_uo j jJ j <_£ jljlûi (j^ 4 ^j Ciujjjl jjjjl jfi b J 4-jLo j ^ Aj _$& Aj 

. OJ UJ^ lHO " 1 op'j 15 oJ 6 J lA£'j 

List-style-type 
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4Jb (j Jp* Aj C1j AjjLj (S j'4>a j£ Ij 4 j qj a£ öû ClbudjjA C*u <>uj tiljjl£ 

■ OSW Û^J^ ^j Û^'J^ a£ Aj 

Upper-roman 


AJJJJ jl£ öjU ^jLöjj ^JJ J LÛl Aj J Û jJjuJ 4 j A£ jl ^jl£ öjj^ ^ Aj öjj^. ^ Aj 

djLk öû jL£jj j ciA£ öû Al 

: O'j^ f ^ 


List-style-type:upper-roman; 


; <i j^J 


<html> 

<head> 

<style type="text/css"> 

ol 

{ 

list-style-type:upper-roman; 

} 

</style> 
</head> 
<body> 
<ol> 
<li>ljb</li> 
<|j>U! jj</|j> 

</ol> 

</body> 

</html> 


! ^L^J 4 j 















I. IjLj 

n. 


circle 


j ciiU. oJ UÎjj <jjlj (_£ oji^ Aj (jU <luu] (jl£ <luui (jjjş. <î ûjj ^^fUjljlU jj 4u» 4 j 

diU oJ -lj 4 jJJJ jU ojlj 


| o jljjjj ^ Aj 


List-style-type:circle; 


\ <jj-aj 


<html> 

<head> 

<style type="text/css"> 

ul 

{ 

list-style-type:circle; 

} 

</style> 

</head> 

<body> 

<ul> 

<|j>UU</li> 

<li>Uljj</|j> 

</ul> 

</body> 

</html> 
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; Aj 


o Ulj 

o ljljj 


List-style-image 


jl£ ÖjU AjI j (JJ A£j dbujjjj jl£ AJjuoj] ^JJj Ö JJJUJ Aj (J Ö J Aj jJ Cljjjjl£ Aj AjLûJÛ ^ Aj 
ÖJ ÖJ <JU0 (J <j| j Aj ^U^ <S Cluj (J a£ <S (J <Gjj j ÖjU j AA 4j C1jI£j Aj Aj jjj 


O' ^ Aj 


List-style-image:url( û j^ ^ c?^); 


Aj jaJ 


<html> 

<head> 

<style type="text/css"> 

ul 

{ 

list-style-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/578155_116644348476527_1909924797_n.jpg); 

} 

</style> 
</head> 
<body> 
<ul> 
<|j>Ulj</li> 
<li>UI jj</|j> 
</ul> 
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Css language 


Ub 


</body> 

</html> 


; ^»L^J Aj 



List -style-position 


ÖJ 4jo3 JJJ jLojI£ AILoij] AjI j JJ A£j (JjLp J L<ul£ AlLaui ^^JJjju) A>UJ Jjj| jJ 

Outside 

AjI j ÖJ <J03 ^Ujjl Ajjjj JJ A£j jLû AILuu] <1 Ij Jjj| jJ öû ÖJ 4 jLûj 3 ja Aj JjA 4j 

; öjl jJjo 3 ^ Aj _ Cljjj ÖJ ÖJ 4uo3 (J AjJjJOJ 


List-style-position:outside; 


Inside 


















Css language 


öjIj 4jj^> cdiû AjIj öj ^Ljuj ^JjujjI Alnj Aj jLû a£ Ajjujj] aS^ CjI£ Ij AjLûjû ^ Aj 

öj <juj ^gjjujjl (J a£ a! ^jjIj aj Aj öj 

; ö jl jLi f Aj 


List-style-position:outside; 


; ö j a£i 4j <j jaj 

; Aj jaj 


<html> 

<head> 

<style type="text/css"> 

ol 

{ 

list-style-type:upper-roman; 

list-style-position:inside; 

} 

ul 

{ 

list-style-type:circle; 

list-style-position:outside; 

} 

</style> 
</head> 
<body> 
<ol> 
<|j>Ub</li> 
<|j>U! jj</|j> 
</ol> 
<ul> 
<li>Ub</|j> 
<|j>U!jj</|j> 
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Css language 


Ub 


</ul> 

</body> 

</html> 


; Aj 


I. ub 

n. uj 

o Uki 

° Uljj 


Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 




Ub 
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table 


oj J 6 _5 jJ <£j L -' 1 ‘ J J ^ jluoj^ (_£jj j û jl-J Aj Ajjuo^ jjjj (J jj J ! cs^ cs - 1 ^ 6 ^) <î jjjljj 6> ^ 

: ca d & 6 j j oî lsj^p cjj'j^ ^ 


jj a£ oû o jl£ ^ 


r 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jû </th> 
<th>û <j</th> 
<tr> 

<td>lj'x/td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 


! ^ 












Css language 


Ub 



jrj 1*^4 Aj 

jUh 

j^ ' 


<html> 

<head> 

<style type="text/css"> 
table,th y td 
{ 

border:2px dotted gray; 

width:30px; 

height:33px; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jU</th> 
<th>û <j</th> 
<tr> 

<td>Ulx/td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 


! 























Css language 


Ulû 


jUj 

î^î 

\*la\ 

■ ■ 

: u : 

ilibi 

MmmmmM 
■. 

MmmmmM 


<luoljU jjjl jj ûJ jjjjm jj oû 4'u : j-\ jlj <î (j AjLhjuojj j Aj jjjl jj oû Ia oj j AA ûj 

; jUja. Ljjjj 0jlj 4J jj a£j jlp jLûl£ 


; <jjAj 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

width:300px; 

height:33px; 

text-align:center; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jU </th> 
<th>û ^</th> 
<tr> 

<td>Ub</td> 
<td>^ *</td> 
</tr> 
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Css language 


Ub 


</table> 

</body> 

</html> 




jU 



Ulo 


T T 


jU AlLulk jAjjI j£ ciîlj Aj (jj a£j öj (jjjl jj Ia öjj AA öj 


; <j jaj 


<html> 

<head> 

<style type="text/css"> 
table,th y td 
{ 

border:2px dotted gray; 

width:300px; 

height:33px; 

text-align:center; 

background-color:blue; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jU </th> 
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Css language 


Ub 


<th>û <k/th> 
<tr> 

<td>Ulû</td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 





Ub 

û'<-£ j^'j 
\ 

Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 





















Css language 



content 


ûj AjJj AjLgjSj Aj jl£ 4 LV£'J 0 JJ J (J^ J^ Ö J ^ AjLûJÛ a! 4 £ j£ Aj 4 jLûj 3 Aj 
AjLûJÛ 4 j (J j& <J (Jjjl jJ öû öj (JJjuJ jJJ j, Xj Cljjj AjLoj <>uj j a£ Aj <JjJjJ Clipjl£ 

^IjJ^ <1 jU \j Ûj <U« Ai jL CjjJjI£ Aj Aj ûj jj a£j jjjl jjjU 


hpforp 


öj!jiuJ ^ Aj JJJJ^J (Jjl£ Aj Ij öj 4uud (J^!jJ öû ÖJ AjLûJÛ Aj jA Aj 


p.before 

{ 

Content:" j aj e jJ"; 

} 


| <J jaJ 


<html> 

<head> 

<style type="text/css"> 
p:before 
{ 

content:"û^ J jj^"; 

} 

</style> 

</head> 

<body> 

<p>j^</p> 

</body> 

_ </html> 

!!! cIjj a£j (jLLuj^jj£ (j <jujjj ^!j^L j a£jj <juj 


; ^L^J Aj 
















jUwoj _£ 


after 


duj ^Jj£ Clljj AjLû j£ AjJjuj jj j Aj (jjjlJ^ ö J AjLûJÛ ^ Aj j& Aj lA öjj 4A öj 

: O'j^ f ^ 


P:after 

{ 

Content:"Oj^"; 

} 


; <i j^j 


<html> 

<head> 

<style type="text/css"> 
p:after 
{ 

co nte n t :" û^O j^" ; 

} 

</style> 

</head> 

<body> 

<p>jJU</p> 

</body> 

</html> 
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Css language 





active 


ir*Vftn\ j AA j <juj a 1 (jl j a£ Aj a£ jj a£j Ij jjjIjj öû öj 4jLgj 3 ja <j jJA <j 

jjjj^ ^ 4^-j 6 J L)J 'j (jp'jj 6 ^ 'j 

; <j jaj 


<html> 

<head> 

<style type="text/css"> 
a:active 

{color:green;font-size:33px;} 

</style> 

</head> 

<body> 

<a href="http://www.google.com/">google</a> 

</body> 

</html> 


4A oj jj <juo jj j£ oû <_£ <5 o o j Ij Aj j j a£jj] J Auuo >L' g '' j a£ <j IIuojj 

(Jjjjj^ ûj ji AlijjS (j ûjtj <3 Ia öjj 


hover 


a£ <£jjî j <juo o>jjJ jLûJuojLa iiîjjl£ j AA jj A^j Ij jjjl jj oû oj 4 _SLoj3 ^ Aj (J jA <J 

; jj jj5j a5o oj jjjjl jj öJ j^j AjLuolj 
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Css language 




<html> 

<head> 

<style type="text/css"> 
aihover 

{color:green;font-size:33px;} 

</style> 

</head> 

<body> 

<a href="http://www.google.com/">google</a> 

</body> 

</html> 


Css grouping 

A j 4_ui <1 (jLa AA û j jy ASj (_£^IjJ ö j AS Aj Aj ui Jj A^. jjjjljJ oJ Aajj 

: O'j^ 1 f ^ cr?“ 



j AA jj (_£_jLp d *' Ö J J L$ jLp 6 J Aj Aj (jLaJjjj (jJJJJ ûJ tiî ûj 

/■)L£iuj 
** ** 

; Aj^j 
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Css language 


Ub 


<html> 

<head> 

<style type="text/css"> 

p,a,hr 

{ 

color:blue; 

background-coloriblack; 

} 

</style> 

</head> 

<body> 

<p>jli^jj£</p> 

<a href="http://www.google.com/">google</a> 

<hr> 

</body> 

</html> 



Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 
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Display 


^ ^ ö J Öi *£} (jJ^ c5j'Û^'j^ ö J 4 jUj3 ^ Aj fj JA 4j 

jl£ <ln>u]jj ^jIAjLoLIJ Jj 4j Aj C1j AjjIj ^£jjl jJjoî 


none 


öj <jjjLi jLj AjIj jjn J jt^ <Luj jjjIjj <j a£ C1jI£ Ij 4jLûj3 ^ Aj 


öjl jJjoj ^ Aj 


Display:none; 


Aj jaJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

display:none; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 


! ^LaL Aj 















CLÛJ jLj^ 4 j ^ y ö jLj*} 4-L)j *lS c*S ö j 


inline 


IAj jlAlj (JiA C^S 4j J 4 uuj <S jLojl^ AjjoJ JJ-ö 4A 4^ C!jI£ IJ Aj 


öjl jJjoJ ^ Aj 


Display:inline; 


I <J JjClI 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

displayiinline; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

<p>jjj£</p> 

</body> 
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</html> 


! ^ 


±J& 


•tSÎ A-j AJjj- 4J Jy 

) Aj jaj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-align:center; 

color:blue; 

background-color:yellow; 

} 

body 

{ 

background-colonblack; 
border:4px inset red; 

} 

</style> 

</head> 

<body> 

<hr> 
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Css language 


Ub 


<p class="a">^ ^ <j </p> 


<hr> 

</body> 

</html> 





<html> 

<head> 

<style type="text/css"> 


p.a 

{ 

text-align:center; 

color:blue; 

background-color:yellow; 
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p.b 

{ 

text-align:center; 

color:red; 

} 

p.b:hover 

{ 

color:blue; 

} 

body 

{ 

background-color:black; 
border:4px inset red; 

} 

</style> 

</head> 

<body> 

<hr> 

<p class="a">(» ij Ajj^ </p> 
<p class="b">cij 44 </p> 

<hr> 

</body> 

</html> 














Css language 


Ub 



Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 
















Css language 



Aj UIj^jjjuJ ^JJJJJI jJ ^ajUl jJ& 4 Aj ^jUj£ A-llLalJ <£ öjl jJjoî Aj JJJ Aj (JJ <JJji. 

^uûU *Lj jl£ Aj AjU jj-G AA ^ J«lljJ lA ÖJJ AA öj ^jud^ AjJ ^JjLjjl J j CllxJjl J (JjJJJ jJ 

(J 4JIj AjIj <S Cluj <J jU£ Aj 4 U j£ ^CJA (J jIjjI J J Clbudjl J (J jJJJ (J Ö jJJ j£Ij A£j ^^uuû 
(J <Jjj>lJ Ij 4j b 4jjj£ a 1 CIujI j£ <JjjU a£ c^Îjj AjIj j AA öj öjIj£ JjjI-J b 4jii£ ^ a ! a£ 
^LU Aj Ia öj j AA öj CIjjj jjL^ j Aj <S jIjjI£ AlLaj jjbj J ö j Aj jj öjI jjb j a£<J 

JjUb jJ jl *UijI£ AjJAJ JJ-Ö AJb 


<S ^Sjixj j AA a 1 jIj a£ Aj AjIj ^-Lûj£ JjjU C* vh AA jLa£ 4 jjj£ j 4£ j 4A j 4£ Aj öj 
j ûj Aj jj öj Aj a£j ^»jbl£U j a£ Aj (JL^uuj ji. öj j^)jj^ jUij ^jblJ^ !j U 4 JVi< ^ 

öj Aij Aj öjUjj^ AjV AA öjj^- Aj jjjIaU ^jl£ AA J Aj a! 


CIJjujJj <joî jk j JijU (J öJjj Jj jl <jli£ j» Aj ^kljlJj ^ajlJ ö^ (JL^uuj jk Aj ^aj£. jjj öj 
JjUiJ ÖJ HlJJ 4j Aj AjLj ^ a! jLi 4uuLj£ J ÖJ Aj jj jLiluî ö-i J 4 j ^ ^ j A£j öUgU 

j Aj j£J <j j^j^jjujjj^ cIjjLuj 4-yj j öjU a! CjjjU ^ aa j <j Ij^ Aj a£ ja 0^ 0 -) jj 
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